
(function(){

    let shopid = 0;
    let areaid = 0;

    // 页面加载 上拉 隐藏选择框
    $('.from').hide()

    // 给 shop 添加点击事件
    $('.cityNav .shop').on('click',function(){
        $('.infoB').html('')
        
        // 点击切换
        $('.from').toggle()

        fetch('http://chst.vip:1234/api/getgsshop')
        .then(response => {
            return response.json()
        }).then(data => {
            let res = data.result
            console.log(res);
            let ele = ''
            res.forEach(item => {
                ele += `
                     <li data-shopid="${item.shopId}">${item.shopName}</li>
                `
            });

            $('.infoB').html(ele);


            // 给 infoB 的 li 添加点击事件
            $('.infoB li').click(function(){
                shopid = $(this).attr('data-shopid')
                console.log(shopid);

                $('.shop span').eq(0).html($(this).html())
                // 切换后收起
                $('.from').hide()

                // return false   阻止事件冒泡
                // 刷新请求数据
                getRroduct(shopid, areaid)
            })
        })


    })

    // 给 place 添加点击事件
    $('.cityNav .place').on('click',function(){
        $('.infoB').html('')

        // 点击切换
        $('.from').toggle()

        fetch('http://chst.vip:1234/api/getgsshoparea')
        .then(response => {
            return response.json()
        }).then(data => {
            let res = data.result
            console.log(res);
            let ele = '';
            res.forEach(item => {
                ele += `
                 <li data-areaid="${item.areaId}">${item.areaName}</li>
                `
            });

            $('.infoB').html(ele)

            
            // 给 infoB 的 li 添加点击事件
            // 使用 on 不能阻止事件冒泡 这里必须用 click
            $('.infoB li').click(function(){
                areaid = $(this).attr('data-areaid')
                console.log(areaid);

                $('.place span').eq(0).html($(this).html().slice(0,2))
                // 切换后收起
                $('.from').hide()

                // return false   阻止事件冒泡
                // 刷新请求数据
                getRroduct(shopid, areaid)
            })

        })

    });
    // 封装函数 请求数据渲染商品列表
    function getRroduct(shopid,areaid){

        fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`)
        .then(response => {
            return response.json()
        }).then(data => {
            let res = data.result
            console.log(res);
            let ele = ''
            res.forEach(item => {
                ele += `
                <li>
                    <a href="#">
                        <img src="${item.productImg}" alt="">
                        <div class="title">${item.productName}</div>
                        <div class="price">${item.productPrice}</div>
                    </a>
                </li>
                `
            });

            $('#product .info').html(ele)
        })
    }

    getRroduct(shopid,areaid)




})();






